<template>
  <div class="todoEidt">
    <dialog-edit :visible.sync="dialogVisible" :title="title" :editModel="editModel"
       @onSave="onSave" :footerVisible="false" :titleAuto="false">
       {{form.wfProcessDTO.applyTitle}}
       <div class="pageTodo">
          <el-tabs v-model="pageTodo">
            <el-tab-pane label="业务申请" name="first">
            </el-tab-pane>
            <el-tab-pane label="流程跟踪" name="second">
            </el-tab-pane>
            <div class="container">
              <component :is="typeComponents" :editModel="'V'" :id="form.wfProcessDTO.bizId" :showFooter="false"
                v-if="pageTodo === 'first'" @getapproval="getapproval"></component>
              <img id="imgProcess" :authSrc="'/restapi/tw/wf/wfManage/dowloadProcessDiagramImg?processInstanceId=' + form.processInstanceId"
                alt="" v-show="pageTodo !== 'first'">
            </div>
          </el-tabs>
       </div>
       <div class="apply">
         <el-tabs v-model="examine"><el-tab-pane :label="editModel !== 'V' ? (pageTodo === 'first' ? '流程审核' : '审核过程') : '审核过程'" name="first"></el-tab-pane></el-tabs>
         <template v-if="pageTodo === 'first' && editModel !== 'V'">
          <div class="tabscontent">
            <el-row :gutter="10">
              <el-col :xs="20" :sm="20" :md="20" :lg="20" >
                <el-form-item label="审核结果" prop="name">
                  <el-radio v-model="formVal.checkStatu" label="1" :disabled="editModel === 'V'">同意</el-radio>
                  <el-radio v-model="formVal.checkStatu" label="2" :disabled="editModel === 'V'">不同意</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <dym-form :editModel="editModel" :componentList="componentList" :formValue.sync="formVal"></dym-form>
          </div>
         </template>
         <template v-else>
          <data-table :toolMenuFlag="false" :sourceData="sourceData"
            :menuFlag="false" :IsRight="false" :operateBtnLayout="operateBtnLayout"
            :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount">
          </data-table>
         </template>
       </div>
       <div class="footer">
        <template v-if="editModel === 'E' && pageTodo === 'first'">
          <el-button type="primary" :loading="loading" @click="save" >保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </template>
        <template v-else>
            <el-button @click="dialogVisible = false">关闭</el-button>
        </template>
       </div>
    </dialog-edit>
  </div>
</template>

<script>
  import BaseDialog from '@/pages/BaseDialog'
  import DialogEdit from '@/components/dialog/DialogEdit'
  import DataTable from '@/components/element/DataTable'
  import dymForm from '@/components/element/dymForm'
  import { processUrl } from '@/utils/constants'
  import { weekWorkTempApi } from '@/api/business/businessApi'
  import { formatDict } from '@/filters/index'
  // import { formatDateMinute } from '@/filters/index'
  import { getToken } from '@/utils/auth'
  export default {
    extends: new BaseDialog(),
    components: {
      DialogEdit,
      dymForm,
      DataTable,
      processUrl
    },
    props: {
      tabsActive: {
        type: String,
        default: 'first'
      },
      title: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        // 需要显示的每一项定义在这里
        componentList: [
          {
            label: '下一步审核人',
            prop: 'assigneeId', // 表单验证传入的值
            labelWidth: '120px',
            componentName: 'BaseSelect',
            api: weekWorkTempApi,
            loadList: 'getAllUserList',
            cols: [14, 14, 14, 14],
            disabled: true,
            placeholder: '请输入',
            value: 'assigneeId' // 字段显示的值
          },
          {
            label: '审核意见',
            prop: 'checkOpinions', // 表单验证传入的值
            labelWidth: '120px',
            componentName: 'el-input',
            type: 'textarea',
            cols: [20, 20, 20, 20],
            placeholder: '请输入',
            value: 'checkOpinions' // 字段显示的值
          }
        ],
        examine: 'first',
        loading: false,
        operateBtnLayout: '',
        columns: [
          {
            prop: 'taskName',
            label: '流程节点',
            align: 'left',
            width: '120px'
          },
          {
            prop: 'checkByName',
            label: '执行人',
            align: 'left',
            width: '100px'
          },
          {
            prop: 'checkStatus',
            label: '处理状态',
            align: 'center',
            width: '100px',
            format: row => { return formatDict(row.checkStatus, 'checkStatus') }
          },
          {
            prop: 'checkTime',
            label: '审批时间',
            align: 'center',
            width: '150px'
          },
          {
            prop: 'checkOpinions',
            label: '审批意见',
            align: 'center'
          }
        ],
        pageTodo: '',
        formVal: {
          checkStatu: '1',
          assigneeId: ''
        },
        loadCount: 0,
        sourceData: [],
        typeComponents: processUrl[this.form.wfProcessDTO.wfType],
        approvalFlag: false,
        hasInit: false
      }
    },
    created () {
      this.getInit()
    },
    mounted () {
      this.$nextTick(() => {
        this.setHeader()
      })
    },
    methods: {
      // 设置请求头
      setHeader () {
        let img = document.getElementById('imgProcess')
        let url = img.getAttribute('authSrc')
        let request = new XMLHttpRequest()
        request.responseType = 'blob'
        request.open('get', url, true)
        request.setRequestHeader('Authorization', getToken())
        request.onreadystatechange = e => {
            if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
                img.src = URL.createObjectURL(request.response)
                img.onload = () => {
                    URL.revokeObjectURL(img.src)
                }
            }
        }
        request.send(null)
      },
      // 办理任务
      save () {
        let params = {
          // assigneeId: wfProcessDTO.assigneeId,
          checkBy: this.form.assignee,
          bizId: this.form.wfProcessDTO.bizId,
          wfType: this.form.wfProcessDTO.wfType,
          taskId: this.form.id,
          ...this.formVal
        }
        this.loading = true
        this.api.doTask(params).then(res => {
          if (res) {
            this.success('执行成功')
            this.dialogVisible = false
            this.onSave()
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      // 初始化数据
      getInit () {
        this.getProcess()
        this.hasNextTask()
      },
      // 获取流程办理记录
      getProcess () {
        this.pageTodo = this.tabsActive
        this.api.getRecords(this.form.wfProcessDTO.bizId).then(res => {
          this.sourceData = res
        })
      },
      getapproval (getapproval) {
        this.approvalFlag = true
        this.formVal.assigneeId = getapproval
        if (this.hasInit) {
          this.componentList.map(_ => {
            if (_.value === 'assigneeId') {
                _.disabled = true
            }
          })
        }
      },
      // 判断当前任务是否还有后续任务
      hasNextTask () {
        this.api.hasNextTask(this.form.id).then(res => {
          this.hasInit = true
          if (!res) {
            this.componentList.map((_, index) => {
              if (_.value === 'assigneeId') {
                this.componentList.splice(index, 1)
              }
            })
          } else {
            // 当周报页面时，直接获取当前批准人
            this.componentList.map(_ => {
              if (_.value === 'assigneeId') {
                if (this.approvalFlag) {
                  _.disabled = true
                } else {
                  _.disabled = false
                }
              }
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
 .todoEidt {
  .pageTodo {
    height: 320px;
    overflow: hidden;
    .container {
      height: 280px;
      overflow-y: auto;
    }
    // 流程图图片
    img {
      max-width: 100%;
      height: auto;
    }
  }
  .apply {
    width: 100%;
    margin-top: 6px;
    .tabscontent {
      width: 700px;
    }
  }
  .footer {
    text-align: right;
    margin: 30px 0 15px;
  }
 }
</style>
